<template>
  <el-dialog
    :visible.sync="dialogFormVisible"
    :show-close="true"
    :append-to-body="true"
    class="medium-common-dialog-size dialog-width702 order-setting-dialog"
    center>
    <div class="title">
      <Title title="配置提交按钮名称与下一个节点审批人" />
    </div>
    <div :style="{maxHeight: maxHeight+'px'}" class="content scroll">
      <SelectRoleUser
        ref="SelectRoleUser"
        :opeator-type="opeatorType"
        :maxlength="6"
        v-model="submitBtnList"
        :error-roles-ids="errorRolesIds"
        :type="type"
        show-empty
        role-name-placeholder="提交按钮名称"
        role-name-key="btnText"
        hide-btn
        @removeError="removeError" />
    </div>
    <div class="btn-list">
      <div class="tip">最多添加6个按钮</div>
      <PlainCreateBtn :class="{'disabled-btn':submitBtnList.length >= 6}" @click="addExamineRoles">添加提交按钮</PlainCreateBtn>
      <el-button type="primary" size="small" @click="handelOk()">确认</el-button>
      <el-button class="back-btn cancel-btn-style" size="small" @click="handelClose()">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Title from '@/components/Title';
import SelectRoleUser from './selectRoleUser';
import ElMessage from '@/utils/message';
import { ROLE_TYPE } from '@/utils/const/process';
import formMakeMixins from '@/views/legal/process/mixins/formMake';

export default {
  components: { Title, SelectRoleUser },
  // model: {
  //   prop: 'submitBtnList',
  //   event: 'changeData'
  // },
  mixins: [formMakeMixins],
  props: {
    type: { // 增加type判断，避免不同环境id改变
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      errorRolesIds: [],
      dialogFormVisible: false,
      maxHeight: '',
      submitBtnList: [],
      opeatorType: [
        { id: ROLE_TYPE.DEFAULT, name: '不改变审批人' },
        { id: ROLE_TYPE.CREATOR, name: '任务创建人' },
        { id: ROLE_TYPE.DEPARTMENT, name: '选择部门' },
        { id: ROLE_TYPE.CUSTOMIZE, name: '自定义人员' },
        { id: ROLE_TYPE.UNLIMITED, name: '不限制审批人' },
        { id: ROLE_TYPE.PROPOSER, name: '申请人' },
        { id: ROLE_TYPE.DIRECTOR, name: '主管' },
        { id: ROLE_TYPE.DESIGNATE, name: '指定人员选择字段' },
        { id: ROLE_TYPE.DESIGNATE_DIRECTOR, name: '指定人员主管' },
        { id: ROLE_TYPE.CREATOR_SUPERIOR, name: '创建人直属上级' },
        { id: ROLE_TYPE.ROLE_GROUP, name: '角色组' },
        { id: ROLE_TYPE.BP_APPROVER, name: '获取BP指定审批人' }
      ]
    };
  },
  methods: {
    open(submitBtnList) {
      const clientHeight = window.innerHeight;
      this.maxHeight = (clientHeight * 3) / 5;
      this.submitBtnList = this.clearDeletedData(_.cloneDeep(submitBtnList || []));
      this.dialogFormVisible = true;
    },
    handelClose() {
      this.dialogFormVisible = false;
    },
    addExamineRoles() {
      this.$refs.SelectRoleUser.addExamineRoles();
    },
    handelOk() {
      this.handelError();
      if (this.errorRolesIds.length) {
        ElMessage.error('请检查信息是否填写完整');
        return;
      }
      this.dialogFormVisible = false;
      this.$emit('setSubmitBtnConfig', this.submitBtnList);
    },
    handelError() {
      this.errorRolesIds = [];
      if (this.submitBtnList && this.submitBtnList.length) {
        this.submitBtnList.forEach((i, index) => {
          if (!i.btnText) {
            this.errorRolesIds.push({
              type: 'role',
              id: index,
              left: 0,
              class: 'error-role-name',
              msg: '请输入按钮名称'
            });
          }
          if (i.roleType === ROLE_TYPE.DEPARTMENT && (!i.departmentIdList || i.departmentIdList.length === 0)) {
            this.errorRolesIds.push({
              type: 'dept', id: index, left: 172 * 2 + 'px', msg: '请选择部门'
            });
          } else if (i.roleType === ROLE_TYPE.CUSTOMIZE && (!i.diyUserIdList || i.diyUserIdList.length === 0)) {
            this.errorRolesIds.push({
              type: 'diyUser', id: index, left: 172 * 2 + 'px', msg: '请选择人员'
            });
          } else if (i.roleType === ROLE_TYPE.DIRECTOR && !i.manageRole && i.manageRole !== 0) {
            this.errorRolesIds.push({
              type: 'manage', id: index, left: 172 * 2 + 'px', msg: '请选择主管类型'
            });
          } else if (i.roleType === ROLE_TYPE.DESIGNATE && !i.designateUserSelect) {
            this.errorRolesIds.push({
              type: ROLE_TYPE.DESIGNATE, id: index, left: 172 * 2 + 'px', msg: '请选择人员选择字段'
            });
          } else if (i.roleType === ROLE_TYPE.ROLE_GROUP && !i.roleGroup) {
            this.errorRolesIds.push({
              type: ROLE_TYPE.ROLE_GROUP, id: index, left: 172 * 2 + 'px', msg: '请选择角色组'
            });
          } else if (i.roleType === ROLE_TYPE.BP_APPROVER) {
            if (!i.bpNames || !i.bpNames.length) {
              this.errorRolesIds.push({
                type: ROLE_TYPE.BP_APPROVER, id: index, left: 172 * 2 + 'px', msg: '请选择BP类型'
              });
            } else if (!i.bpDepts || !i.bpDepts.length) {
              this.errorRolesIds.push({
                type: ROLE_TYPE.BP_APPROVER, id: index, left: 172 * 2 + 150 + 'px', msg: '请选择部门'
              });
            }
          } else if (i.roleType === ROLE_TYPE.ARREARS_USERS && !i.transferRole && i.transferRole !== 0) {
            this.errorRolesIds.push({
              type: ROLE_TYPE.ARREARS_USERS, id: index, left: 172 * 2 + 'px', msg: '请选择指定人员字段'
            });
          } else if (i.roleType === ROLE_TYPE.DESIGNATE_DIRECTOR) {
            if (!i.designateDirectorUser) {
              this.errorRolesIds.push({
                type: ROLE_TYPE.DESIGNATE_DIRECTOR, id: index, left: 172 * 2 + 'px', msg: '请选择人员选择字段'
              });
            } else if (!i.designateDirector && i.designateDirector !== 0) {
              this.errorRolesIds.push({
                type: ROLE_TYPE.DESIGNATE_DIRECTOR, id: index, left: 172 * 2 + 150 + 'px', msg: '请选择主管类型'
              });
            }
          }
        });
      }
    },
    removeError() {
      this.errorRolesIds = [];
    }
  }
};
</script>

<style lang="scss" scoped>

.title {
  display: flex;
  align-items: center;
  .icon {
    font-size: 18px;
    color: #999;
    cursor: pointer;
  }
}
.btn-list {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .tip {
    position: absolute;
    left: 55px;
    font-size: 12px;
    color: #999999;
  }
}
.scroll {
  min-height: 200px;
  padding: 20px 0;
  @include scrollBar();
}
.disabled-btn {
  cursor: not-allowed !important;
  background-color: #a0b7ff !important;
  border-color: #a0b7ff !important;
  color: #fff !important;
  &:hover {
    cursor: not-allowed !important;
    background-color: #a0b7ff !important;
    border-color: #a0b7ff !important;
    color: #fff !important;
  }
}
</style>

<style lang="scss">
.dialog-width702 {
  .el-dialog {
    width: 740px !important;
  }
}
</style>
